<template>
    <div class="learn" style="height:100%">
        <navbar class="header-title-01 header-box header-white">
            <template #title>
                <van-tabs v-model="active" @click="jump" color=" #075ebb" title-active-color=" #075ebb" title-inactive-color="#999">
                    <van-tab :title="$t('my_course')"></van-tab><!--课程-->
                    <van-tab :title="$t('my_certified_courses')"></van-tab><!--我的认证课程-->
                    <van-tab :title="$t('my_exam')"></van-tab><!--认证考核-->
                </van-tabs>
            </template>
        </navbar>
        <div class="content-noBottom">
            <keep-alive>
                <router-view :type="cala"></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import { Tab, Tabs, Icon } from 'vant';
export default {
    name: 'myLean',
    data() {
        return {
            active: 0,
            encId: '',
            cala: null
        };
    },
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Icon.name]: Icon
    },
    methods: {
        jump(index) {
            switch (index) {
            case 0:
                this.$router.replace({path: `/myLearn/myCourses`});
                break;
            case 1:
                this.$router.replace({path: `/myLearn/myCertifiedCourses`});
                break;
            case 2:
                this.$router.replace({path: '/myLearn/myExam'});
                break;
            }
        },
        init() {
            if (window.localStorage.getItem('loginUser')) {
                this.encId = window.localStorage.getItem('loginUser');
            } else {
                this.$axios({
                    method: 'GET',
                    url: '/app/api/user/current'
                }).then(res => {
                    this.encId = this.wbEncryptor(res.data.usrEntId);
                });
            }
        }
    },
    mounted() {
        if (this.$route.name === 'myExam') {
            this.active = 2;
        } else if (this.$route.name === 'myCertifiedCourses') {
            this.active = 1;
        } else {
            this.active = 0;
        }
        this.init();
    },
    watch: {
        $route: {
            handler: function(val, oldVal) {
                this.showCatalog = false;
            },
            // 深度观察监听
            deep: true
        }
    }
};
</script>

<style scoped lang="less">
.learn{
    .header-box{
        /deep/.van-tab{
            transform: translateZ(0);
            font-size: 15px;
        }
        /deep/.van-tabs--line .van-tabs__wrap{
            height: 55px;
        }
        border-bottom: 1px solid #EEEEEE;
    }
}
.header-white{
  background: #fff;
}
/deep/.van-nav-bar .van-icon {
    color: rgb(153, 153, 153);
}
</style>
